<template>
    <div>
      <div style="margin-bottom: 10px;">
          <el-input style="width:200px" placeholder="查询用户名" v-model="username"></el-input> 
          <el-input style="width:200px ; margin:0 5px" placeholder="查询项目名称" v-model="projectName"></el-input>
          <el-button type="primary" @click="load(1)">查询</el-button>
          <el-button type="info" @click="reset">重置</el-button>
      </div>
      <div style="margin: 10px 0;">
          <el-button type="primary" plain @click="handleAdd" v-if="user.role === '学生'" >新增</el-button>         
      </div>
      <el-table :data="tableData" stripe :header-cell-style="{backgroundColor: 'aliceblue',color:'#666'}" >
          <el-table-column prop="id" label="序号" width="70"></el-table-column>
          <el-table-column prop="username" label="用户名"></el-table-column>
          <!-- <el-table-column prop="geoNames" label="姓名"></el-table-column> -->
          <!-- <el-table-column prop="projectId" label="项目序号"></el-table-column> -->
          <el-table-column prop="projectName" label="项目名称"></el-table-column>
          <el-table-column prop="projectType" label="项目类型"></el-table-column>
        <el-table-column label="项目计划书" align="center" width="150">
          <template v-slot="scope">
            <el-button
                v-if="scope.row.businessPlan"
            type="primary"
            size="mini"
                @click="downloadPlan(scope.row.businessPlan)"
            >
            下载
            </el-button>
            <span v-else>无</span>  <!-- 如果没有下载链接，显示“无” -->
          </template>
        </el-table-column>
          <el-table-column label="gitee仓库地址" align="center" width="150">
            <template v-slot="scope">
              <el-button
                  v-if="scope.row.businessPlan"
                  type="primary"
                  size="mini"
                  @click="downloadPlan(scope.row.gitRepo)"
              >
                地址
              </el-button>
              <span v-else>无</span>  <!-- 如果没有下载链接，显示“无” -->
            </template>

        </el-table-column>
          <el-table-column prop="supervisor" label="指导老师"></el-table-column>
          <el-table-column prop="reviewer" label="评审专家"></el-table-column>
          <el-table-column prop="teamIntroduction" label="团队介绍"></el-table-column>
          <el-table-column prop="contactEmail" label="邮箱"></el-table-column>
          <el-table-column label="操作" align="center" width="300px">
              <template v-slot="scope">
                  <!-- <el-button size="mini" type="success" plain @click="audit(scope.row)" v-if="user.role === '教师'||user.role === '管理员' ">审核</el-button> -->
                  <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>  
      <div style="margin: 10px 0;">
          <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
          </el-pagination>
      </div>  
      <el-dialog title="项目" :visible.sync="fromVisible" width="30%">
          <el-form :model="form" label-width="80px" style="padding-right: 20px;" :rules="rules" ref="formRef">
              <el-form-item label="项目" prop="projectName">
                  <el-input v-model="form.projectName" placeholder="项目名称"></el-input>
              </el-form-item>
              <el-form-item label="项目概述" prop="project">
                  <el-input type="textarea" v-model="form.project" placeholder="内容"></el-input>
              </el-form-item>
            <el-form-item label="团队介绍" prop="team">
              <el-input type="textarea" v-model="form.project" placeholder="内容"></el-input>
            </el-form-item>
            <el-form-item label="其他" prop="other">
              <el-input type="textarea" v-model="form.project" placeholder="内容"></el-input>
            </el-form-item>
              <el-form-item label="项目日期" prop="time">
                <el-date-picker v-model="form.time" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
              </el-form-item>
          </el-form>
  
          <div slot="footer" class="dialog-footer">
              <el-button @click="fromVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
          </div>
      </el-dialog>

    </div>
  </template>
  
  <script>
  export default {
      data(){
          return{
              tableData:[],  //所有的数据
              pageNum:1,  //当前的页码
              pageSize:5, //每页显示个数
              username:'',
              name:'',
              projectName:'',
              total:0,
              fromVisible:false,
              auditVisible:false,
              form:{},
              fileList:[],
              user:JSON.parse(localStorage.getItem('honey-user') ||('{}')),
              rules: {
                  username: [
                      { required: true, message: '请输入账号', trigger: 'blur' },
                  ],
              },
              ids:[],
              url:'',
              urls:[]
          }
      },
      created(){
        this.loutt()
      },
      methods:{

          // 下载项目计划书
          downloadPlan(url) {
            if (!url) {
              this.$message.warning("下载链接无效");
              return;
            }
            // 使用 window.open 打开下载链接
            window.open(url, "_blank");
          },

        loutt(){
          try {
            this.loading = true;
            this.$request.get('/audit/selectProject',{
              params:{
                pageNum: this.pageNum,
                    pageSize: this.pageSize,
              }
            }).then(res=>{
              this.tableData = res.data?.records || [];
              this.total = res.data?.total || 0;
                })
          } catch (error) {
            console.error('获取数据失败:', error);
            this.$message.error('数据加载失败');
          } finally {
            this.loading = false;
          }
        },

        preview(url){
            window.open(url)
        },
          reset(){
              this.projectName = ''
              this.username =''
              this.load()
          },
          handleCurrentChange(pageNum){
              this.load(pageNum)
          },
          load(pageNum){  //分页查询   传入一个pageNum默认值1，每次查询后显示第一页的数据
              if(pageNum){
                  this.pageNum = pageNum
              }
              this.$request.get('/audit/selectByPage',{
                  params:{
                      pageNum: this.pageNum,
                      pageSize: this.pageSize,
                      username:this.username,
                      projectName:this.projectName,

                  }
              }).then(res=>{
              this.tableData = res.data.records
              this.total=res.data.total
          })
          },
          handleAnnexesSuccess(response ,file ,fileList){
              //把附件属性换成上传附件的连接
              this.form.annexes = response.data
          },
          save(){  //保存按钮触发逻辑 触发新增或更新
              this.$refs.formRef.validate((valid) => {
            if (valid) {
              // 验证通过
              this.$request({
                  url: this.form.id ?  'audit/update' :'audit/add',
                  method:this.form.id? 'PUT' :'POST',
                  data:this.form
              }).then(res=>{
                  if(res.code ==='200'){    //表示成功保存
                      this.$message.success('保存成功')
                      this.load(1)
                      this.fromVisible = false
                  }else{
                      this.$message.error(res.msg) //弹出错误信息
                  }
              })
            }
          })
          },
          handleAdd(){
              this.form ={ }  //新增数据时候清空数据
              this.form.userId =this.user.id
              this.fileList = [];
              this.fromVisible =true  //打开弹窗
          },
          handleEdit(row){         //编辑数据
              this.form =JSON.parse(JSON.stringify(row))   //给form对象赋值 注意要深拷贝
              this.fileList = [];
              this.fromVisible =true 
          },
          del(id){
              this.$confirm('您确认删除吗？','确认删除',{type: "warning"}).then(response=>{
                  this.$request.delete('/audit/delete/'+ id).then(res=>{
                      if(res.code ==='200'){
                          this.$message.success('操作成功')
                          this.loutt(1)
                      }else{
                          this.$message.error(res.msg)
                      }
                  })
                  
              }).catch(()=>{})
          },

      },
  
  }
  </script>
  
  <style>
  
  </style>